<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin: 100px auto;
            border: 1px solid skyblue;
        }
        .top span {
            margin: 0 10px;
        }
        .top .choose {
            color: #f30;
        }
        .top {
            margin-bottom: 20px;
        }
        .bottom p {
            font-size: 16px;
            display: none;
        }
        .bottom .chice {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <span class="choose">香樟</span>
            <span>紫叶李</span>
            <span>栾树</span>
            <span>晚樱</span>
            <span>合欢</span>
        </div>
        <div class="bottom">
            <p class="chice">香樟(Cinnamomum camphora (Linn) Presl)，是樟目、樟科、樟属常绿大乔木，为亚热带常绿阔叶树种。主要分布于长江以南，优以台湾、福建、江西、湖南、四川等栽培较多。
            性喜温暖湿润的气候条件，不耐寒冷。</p>
            <p>紫叶李（学名：Prunus cerasifera f. atropurpurea），别名红叶李，蔷薇科李属落叶小乔木，高可达8米，原产亚洲西南部，中国华北及其以南地区广为种植。叶常年紫红色，著名观叶树种，孤植群植皆宜，能衬托背景。尤其是紫色发亮的叶子，在绿叶丛中，像一株株永不败的花朵，在青山绿水中形成一道靓丽的风景线。</p>
            <p>栾树（Koelreuteria paniculata），别名：木栾、栾华等，是无患子科、栾树属植物。为落叶乔木或灌木；树皮厚，灰褐色至灰黑色，老时纵裂；皮孔小，灰至暗褐色；小枝具疣点，与叶轴、叶柄均被皱曲的短柔毛或无毛 [1]  。</p>
            <p>晚樱，蔷薇科樱属植物，落叶乔木，树皮银灰色，有锈色唇形皮孔，叶片为椭圆状卵形、长椭圆形至倒卵形，纸质、具有重锯齿，叶柄上有一对腺点，托叶有腺齿。在日本有悠久的栽培历史，园艺品种极多，有日本国花之誉。主要由本种及其变种与其他种类杂交培育而成</p>
            <p>合欢（Albizia julibrissin Durazz.）， [1]  又名绒花树，马缨花。落叶乔木，夏季开花，头状花序，合瓣花冠，雄蕊多条，淡红色。荚果条形，扁平，不裂。高4-15米。树冠开展；小枝有棱角，嫩枝、花序和叶轴被绒毛或短柔毛。托叶线状披针形；头状花序于枝顶排成圆锥花序；花粉红色；花萼管状，花期6-7月；果期8-10月。</p>
        </div>
    </div>
    <script>
        var sps = document.querySelectorAll('.box>.top>span');
        var ps = document.querySelectorAll('.bottom>p');
        for (var i = 0; i <sps.length; i++) {
            sps[i].index = i;
            sps[i].onclick = function() {
                for (var j = 0; j < sps.length; j++) {
                    sps[j].className = '';
                }
                sps[this.index].className = 'choose';
                for (var k = 0;  k < ps.length; k++) {
                    ps[k].className = '';
                }
                ps[this.index].className = 'chice';
            }
        }
    </script>
</body>
</html>